<template>
  <div class="detail">
    <Nav></Nav>
    <Content class="content">
      <Card>
        <h4>
          {{ art.title }}
        </h4>
        <Row justify="space-between">
          <Col>
            <ul>
              <li>发布人:{{ art.username }}</li>
              <li>创建时间:{{ art.createTime }}</li>
              <li>点赞数:{{ art.praise }}</li>
            </ul>
          </Col>
          <Col>
            <ul>
              <li>
                话题分类：
                <Button
                  type="info"
                  v-for="(item, index) in cList"
                  :key="index"
                  >{{ item }}</Button
                >
              </li>
              <li>评论数：{{ art.chat }}</li>
              <li>阅读量:{{ art.eye }}</li>
            </ul>
          </Col>
          <Col>
            <el-button type="danger">回复评论</el-button>
          </Col>
        </Row>
      </Card>
      <Row class="detail-main">
        <Col span="24">
          <Tabs type="card">
            <TabPane label="详情">
              <div class="block">
                <el-image v-if="art.imgUrl" :src="art.imgUrl"></el-image>
              </div>

              <p>{{ art.body }}</p>
            </TabPane>
            <TabPane label="评论">
              <el-card class="box-card">
                <div slot="header" class="clearfix comment">
                  <Row>
                    <Col>
                      <img src="" alt="" />
                    </Col>
                    <Col>
                      <Row>
                        <Col
                          ><p>{{ comment.name }}</p></Col
                        >
                      </Row>
                      <Row>
                        <Col
                          ><p>{{ comment.word }}</p></Col
                        >
                      </Row>
                    </Col>
                  </Row>
                </div>
                <div class="item">
                  {{ comment.body }}
                </div>
              </el-card>
            </TabPane>
          </Tabs>
        </Col>
      </Row>
    </Content>
  </div>
</template>

<script>
export default {
  
  name: "Detail",
  data() {
    return {
      art: {},
      cList: [],
      comment: {},
      timer: null,
    };
  },
  props: {
    aid: String,
  },
  created() {
    this.$artcle
      .getaList({
        data: {
          aid: this.aid,
        },
      })
      .then((res) => {
         console.log(res.data);
        this.art = res.data[0];
        this.$artcle.getcList().then((res) => {
          console.log(res);
          let arr = res.data;
          arr.forEach((el) => {
            // console.log(el);
            // console.log(this.art.cid.split(","),el.cid);
            if (this.art.cid.split(",").includes(el.cid)) {
              // console.log(this.cList);

              this.cList.push(el.title);
            }
          });
        });
        this.$userApi
          .getInfoById({
            data: {
              uid: this.art.uid,
            },
          })
          .then((res) => {
            // console.log(res);
            this.$set(this.art, "username", res.data.username);
          });
      });
  },
  mounted() {
    this.timer = setTimeout(() => {
      this.$artcle
        .addSee({
          params: {
            aid: this.art.aid,
          },
        })
        .then((res) => {
          console.log(res);
        });
    }, 5000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.content {
  min-width: 450px;
  padding: 0px 13vw;
  text-align: left;
  button {
    // position: relative;
    margin-top: 72px;
    // left: -10px;
  }
  h4 {
    font-size: 26px;
  }
  ul {
    list-style: none;
    li {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
    }
    button {
      padding: 6px 10px;
      margin-top: 0;
    }
  }
  .detail-main {
    margin-top: 50px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .slideshow {
    width: 60%;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-right: 20px;
    margin-left: 5px;
  }
  .comment {
    img {
      width: 50px;
    }
    p {
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>